<template>
  <div class="admin-blockchain">
    <h2>区块链管理</h2>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409eff;">
              <el-icon><Connection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">区块高度</div>
              <div class="stat-value">3,842</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67c23a;">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">病历总数</div>
              <div class="stat-value">12,543</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #e6a23c;">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">账户总数</div>
              <div class="stat-value">1,248</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f56c6c;">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">异常交易</div>
              <div class="stat-value">7</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="node-card">
      <template #header>
        <div class="card-header">
          <h3>区块链节点管理</h3>
          <el-button type="primary" icon="Plus">添加节点</el-button>
        </div>
      </template>
      
      <el-table :data="nodes" style="width: 100%" stripe>
        <el-table-column prop="name" label="节点名称" width="150" />
        <el-table-column prop="address" label="节点地址" width="180" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === '运行中' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="blocks" label="同步区块" width="120" />
        <el-table-column prop="lastSync" label="最后同步时间" width="180" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" icon="Edit">配置</el-button>
            <el-button type="danger" size="small" icon="Delete">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <el-card class="transaction-card">
      <template #header>
        <div class="card-header">
          <h3>异常交易监控</h3>
          <el-button type="warning" icon="Refresh">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="abnormalTransactions" style="width: 100%" stripe>
        <el-table-column prop="date" label="日期" width="150" />
        <el-table-column prop="hash" label="交易哈希" min-width="180" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary" @click="viewTransaction(scope.row)">
              {{ truncateHash(scope.row.hash) }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120" />
        <el-table-column prop="reason" label="异常原因" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" icon="View">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const nodes = ref([
      { name: '主节点', address: '192.168.1.100:8545', status: '运行中', blocks: 3842, lastSync: '2023-07-22 10:30' },
      { name: '备份节点1', address: '192.168.1.101:8545', status: '运行中', blocks: 3842, lastSync: '2023-07-22 10:28' },
      { name: '备份节点2', address: '192.168.1.102:8545', status: '离线', blocks: 3820, lastSync: '2023-07-21 15:45' }
    ])
    
    const abnormalTransactions = ref([
      { date: '2023-07-22 10:30', hash: '0x9b7b0d1e4d8f0c3a6b5d2e8f1a0c3b5d2e8f1a0c3', type: '病历修改', reason: '多次尝试修改' },
      { date: '2023-07-20 14:15', hash: '0x742d35cc6634c0532925a3b844bc454e4438f44e', type: '账户创建', reason: '权限不足' },
      { date: '2023-07-18 09:45', hash: '0x5aafe7e8d70aae3a1c1b8f8c1e1a0c3b5d2e8f1a0', type: '病历删除', reason: '非法操作' }
    ])
    
    const truncateHash = (hash) => {
      if (!hash) return ''
      return `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}`
    }
    
    const viewTransaction = (tx) => {
      console.log('查看交易详情:', tx.hash)
    }
    
    return {
      nodes,
      abnormalTransactions,
      truncateHash,
      viewTransaction
    }
  }
}
</script>

<style scoped>
.admin-blockchain {
  padding: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 0;
  border: none;
  border-radius: 8px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.node-card, .transaction-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
</style>